<template>
    <div>
        <div class="title"><h1>教师考勤管理</h1></div>
        <div class="option">
            <span style="margin-left: 200px">考勤日期：</span>
            <el-date-picker
                v-model="valueDate"
                type="date"
                placeholder="选择日期"
                style="width: 240px"
                @change="handleDateChange"
            />
            <el-button style="margin-left: 20px" type="primary" @click="handleSearch">查询</el-button>
            <el-button style="margin-left: 20px" type="primary" @click="refreshPage">返回</el-button>
        </div>
        
        <div class="list" style="margin-top: 20px">
            <span>教师考勤记录：</span>
            <template v-if="isListLoad">
                <el-table :data="attendanceData" border style="width: 100%">
                    <el-table-column prop="teacherId" label="教师ID" width="180"/>
                    <el-table-column prop="teacherName" label="教师姓名"/>
                    <el-table-column prop="date" label="考勤日期"/>
                    <el-table-column prop="status" label="考勤状态"/>
                    <el-table-column label="备注">
                        <template #default="scope">
                            <span>{{ scope.row.remarks || '无' }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <template #default="scope">
                            <el-button type="primary" @click="handleEdit(scope.row)" disabled>
                                编辑
                            </el-button>
                            <el-button type="danger" @click="handleDelete(scope.row.id)" disabled>
                                删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {ElButton, ElDatePicker, ElDialog, ElMessage, ElTable, ElTableColumn} from 'element-plus';

const valueDate = ref('');
const isListLoad = ref(true); // 假设数据已经加载完成
const attendanceData = ref([
    {
        id: 1,
        teacherId: '213014',
        teacherName: '邝砾',
        date: '2024-07-16',
        status: '正常',
        remarks: '无'
    },
    {
        id: 2,
        teacherId: '213014',
        teacherName: '邝砾',
        date: '2024-07-17',
        status: '迟到',
        remarks: '早上有会议'
    },
    {
        id: 3,
        teacherId: '213014',
        teacherName: '邝砾',
        date: '2024-07-18',
        status: '缺勤',
        remarks: '病假'
    },
    {
        id: 4,
        teacherId: '213014',
        teacherName: '邝砾',
        date: '2024-07-18',
        status: '缺勤',
        remarks: '事假'
    }
]);

const handleDateChange = (val: any) => {
    valueDate.value = val;
    handleSearch();
};

const handleSearch = () => {
    // 模拟查询逻辑，这里不进行实际的查询操作
    
    // 日期字符串
    let dateString = valueDate.value;
    let date = new Date(dateString);
    
    let year = date.getFullYear();
    let month = (date.getMonth() + 1).toString().padStart(2, '0');
    let day = date.getDate().toString().padStart(2, '0');
    let formattedDate = `${year}-${month}-${day}`;
    
    console.log(formattedDate);
    // 查询所有考勤记录
    //遍历所有考勤记录
    // 遍历考勤记录，如果日期符合查询条件，则添加到数组中
    let result = [];
    for (let i = 0; i < attendanceData.value.length; i++) {
        if (attendanceData.value[i].date === formattedDate) {
            console.log(attendanceData.value[i]);
            result.push(attendanceData.value[i]);
        }
    }
    
    attendanceData.value = result;
    //初始化置空
    console.log(attendanceData.value)
    ElMessage.info('查询操作');
    if (attendanceData.value.length === 0) {
        ElMessage.warning('没有符合查询条件的考勤记录');
    } else {
        ElMessage.success('查询成功');
    }
    
};

const handleEdit = (row: any) => {
    console.log('编辑考勤记录:', row);
    // 编辑考勤记录的逻辑
};

const handleDelete = (id: any) => {
    ElDialog.confirm('确定要删除这条考勤记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        attendanceData.value = attendanceData.value.filter(item => item.id !== id);
        ElMessage.success("删除成功");
    }).catch(() => {
        ElMessage.info("已取消删除");
    });
};

const refreshPage = () => {
    location.reload();
};
</script>

<style scoped>
.title {
    font-size: 20px;
    margin-bottom: 10px;
}

.option {
    margin-bottom: 20px;
}
</style>